import DetailTitle from "@/components/DetailTitle"
import styles from './index.module.scss'
import { RollbackOutlined } from '@ant-design/icons';
const Comments = () => {

	const list = [
		{
			name: 'Porite Deison',
			date: '2024-12-18',
			content: 'Very cool and cool information. Keep up the good work, you are very cool.Very cool and cool information. Keep up the good work, you are very cool.Very cool and cool information. Keep up the good work, you are very cool.Very cool and cool information. Keep up the good work, you are very cool.Very cool and cool information. Keep up the good work, you are very cool.Very cool and cool information. Keep up the good work, you are very cool.',
			reply: [
				{ name: 'shaquila', content: 'good!', date: "2024-12-19" },
				{ name: 'Julia', content: 'good!very cool and cool information. Keep up the good work, you are very cool.Very cool and cool information. Keep up the good work.', date: "2024-12-18" },
			]
		}, {
			name: 'Jhone',
			date: '2024-12-20',
			content: 'GOOD',
			reply: []
		}
	]

	// const list = []
	return <div className={styles.commentsBox}>
		<DetailTitle title="Comments" />
		{list.length > 0 && list.map(item => {
			return (
				<div className={styles.listBox} key={item.name}>
					<p><i>{item.name}</i><span>{item.date}</span></p>
					<div>{item.content}</div>
					<a><RollbackOutlined style={{ marginRight: "5px" }} />Reply</a>
					{item.reply.length > 0 && <div className={styles.replyBox}>
						{item.reply.map(son => {
							return (
								<p key={son.name}><span>{son.name}：</span>{son.content}<i>（{son.date}）</i></p>
							)
						})}
					</div>}
				</div>
			)
		})}

		{list.length === 0 && <div className={styles.noYet}>No comments yet!</div>}
	</div>
}
export default Comments